好的版面是吸引讀者第一眼的重要因素之一，如果第一次進入部落格中沒有發現自己想要找的資訊，很可能就不會有第二次光顧的機會了。
這一講我們便來聊聊「第一眼」會見到的首頁，看看市面上有哪些常見的版型，再來探究用在部落格上的有哪些？又要如何切出一個合適的版型。
在談到對部落格首頁切版之前，我們先來認識一下市面上的常見版型，來幫助之後的選擇。以下主要以展示內容的版型為主，一些如論壇、平台類這種互動性高的排版就不多加著墨。
在找尋合適的排版時，有許多網頁開發的工具、服務型網站都提供一些能夠直接瀏覽的畫面來做參考，像是 Dribble、Wix、Tailwind 等等。
那麼首先，來看看最常見的版型：Landing Page。舉凡企業官網、產品上市等頁面，進入後通常能立刻看到大大的主視覺，加上鏗鏘有力的的價值主張及 CTA（Call To Action，如 Get Started、免費諮詢、立即下載等按鈕），這樣的頁面就稱作 Landing Page。
*Landing Page 範例（產自 ChatGPT）
最顯眼的主視覺元素稱作 Hero（主角），把最需要傳遞的訊息擺在第一眼見到的位置。讀者瀏覽過後有興趣了，再繼續往下滑動，就接著會看到多個 Banner（橫幅），介紹公司、服務、合作品牌等等。
其他展示內容的網站，還有像是 Knowledge Base 這種資訊架構清晰的排版，例如 Gitbook、Docusaurus 這類工程師就蠻常使用的平台，很適合撰寫 API Document、操作指南。
其標準的搭配就是左邊一個 Sidebar，右邊顯示文件的內容，主打導航清晰、排版簡潔。
*Knowledge Base 示意圖（產自 ChatGPT）
如果想要表達的內容是有階層的結構，例如想寫餐飲研究的文章，分成中式、日式、西式等大類別，可能西式下面的又有分牛排、披薩、沙拉等等子類別，就可以考慮 Knowledge Base 這種版型。
而另一種形式的內容網站：新聞媒體，其排版的邏輯則著重在顯示足夠豐富且多樣的內容。和 Knowledge Base 有些不一樣，讀者在瀏覽知識文件時通常帶有比較強的目的性，可能就是為了找某個 API 的使用方式；但是去看新聞的讀者只是想獲取新知，並不知道此行能看到些什麼，如果標題不夠引人入勝，時常就直接離開了。
新聞網站的目標，基本上就是希望讀者能快速被吸引並留下來閱讀，因此在設計上會把內容顯示的更「密集」一些，這樣一來能盡量讓有不同興趣的讀者留下。
*類似 BBC 的重製頁面（產自 ChatGPT）
如此內容密集的排版有點像是把首頁當成「目錄」，讓你知道有哪些重點新聞，而且你又較容易能一眼掃到你有興趣的內容，進而提升 CTR（Click-Through Rate，點擊率）等指標。所以版面上常見 Hero 展示頭條，旁邊有分區可掃過的重點新聞。
今天要聊的主角：部落格，雖然也是以內容為導向，但是性質和新聞網站稍有不同，我們的更新頻率不太可能這麼高，通常涉略的種類也不會太多，因此我認為目標可以著重在清晰、展現自己的風格，以及把熱門和吸引人的文章放個一兩篇在 Hero 的位置，偶爾更換即可。
最簡單的就是像 Medium 這樣極簡風格的 Single-Column（單欄式）排版，桌面版通常會多加上 Sidebar 來顯示其他資訊。
在 Sidebar 的部分可以放上熱門的文章、排行榜等資訊，主要區域則放置最新文章。
*Single-Column 示意圖
我之前在使用的 Hexo Icarus Theme 也是類似的概念，只是在桌面版除了中間的單欄文章列表外，左右兩側都有 Sidebar 來顯示更多資訊，包含作者、標籤、分類、彙總等等。
*Hexo Icarus 版型
使用 Single-Column 的好處就是在使用 RWD 開發手機版本的時候也很直覺，當寬度變小，我們只要將 Sidebar 隱藏起來就完成了，簡單且簡潔。
如果想要在頁面中呈現更多的內容，將整個頁面縱向的切成多個欄位就是一種常見的做法。
將畫面切成雙欄，橫列便能一次顯示兩種資訊，常見的作法有用卡片來呈現每篇文章的類型，一列能顯示兩張卡片。
*Two Cards 示意圖
進一步可以縱向的將頁面再切成多個欄位，加上一些組合。
像是放上一張 Hero 的橫幅版面，配上 Slogan 及閱讀排行，下方再水平的放上三張文章的卡片，也是一種不錯的搭配方式。
*Hero + Three Columns 示意圖
使用多欄的排版方式可以增加更多資訊的呈現，也能玩出更多的花樣。如果要開發手機版的話，同樣也不會太難處理，常見的作法就是以卡片這樣的區塊為單位變成 Single-Column 來呈現，隱藏如 Hero 這類較大的區塊。
會有這樣單欄、多欄、卡片型態的部落格排版，主要是為了適應現代越來越多流量從手機而來。截至 2025 年中，手機的上網流量已經接近六成，比電腦多上不少，所謂 Mobile-First 的設計概念便在這幾年誕生出來，而上述這幾類排版的邏輯之所以常見，就是因為可以很好的在電腦、平板、手機等不同大小的畫面實作出來。
下一講，我們來更深入的聊聊在不同的視窗尺寸下，怎麼規劃所謂 RWD 的頁面佈局。
iThome鐵人賽
看影片追技術